<template>
    <div class="swiper-container" v-if="!isMobile">
        <!-- 使用 Swiper 组件 -->
        <swiper v-if="bannerImgList.length > 0" :modules="modules" @swiper="onSwiper" :navigation="true" :loop="true"
            :autoplay="{ delay: 3000, disableOnInteraction: false }" :space-between="10" :slides-per-view="3"
            @slideChange="onSlideChange" :centered-slides="true" class="my-swiper">
            <!-- 轮播项 -->
            <swiper-slide v-for="(item, index) in bannerImgList" :key="index" @click="openProductInfoPage(item)">
                <div class="slide-wrapper">
                    <div class="product-image">
                        <img :src="item.imgUrl" alt="轮播图" />
                    </div>
                </div>
            </swiper-slide>
        </swiper>

        <!-- 自定义 Pagination -->
        <div class="custom-pagination">
            <span v-for="(bullet, index) in bannerImgList.length" :key="index"
                :class="['pagination-bullet', { active: activeIndex === index }]" @click="setSlide(index)">
            </span>
        </div>
    </div>

    <n-carousel show-arrow v-else loop autoplay
        :style="{ '--n-dot-color-active': '#F4BB62', '--n-dot-color': '#777777' }">
        <img v-for="(item, index) in bannerImgList" class="carousel-img" :key="index" :src="item.imgUrl"
        @click="openProductInfoPage(item)">
        <template #arrow="{ prev, next }">
            <!-- 左箭头 -->
            <button class="custom-arrow prev" @click="prev">
                <img src="@/assets/images/png/左箭头.png" class="left-arrow">
            </button>
            <!-- 右箭头 -->
            <button class="custom-arrow next" @click="next">
                <img src="@/assets/images/png/左箭头.png" class="right-arrow">

            </button>
        </template>
    </n-carousel>
</template>


<script setup>
import { API_URL } from '@/config'
import { bannerList } from '@/api'
import { ref, defineProps, onMounted } from 'vue';
// 引入 Swiper 核心模块和样式
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Autoplay } from 'swiper/modules';
import 'swiper/swiper-bundle.css';

// 图片数据
// const images = ref([
//     "https://d7z22c0gz59ng.cloudfront.net/cms/japan/bnnr/slide/tpmf_800_360_240902a.jpg",
//     "https://d7z22c0gz59ng.cloudfront.net/cms/japan/bnnr/slide/18661.jpg",
//     "https://d7z22c0gz59ng.cloudfront.net/cms/japan/bnnr/slide/58742.jpg",
//     "https://d7z22c0gz59ng.cloudfront.net/cms/japan/bnnr/slide/24370.jpg",
//     "https://d7z22c0gz59ng.cloudfront.net/cms/japan/bnnr/slide/61127.jpg",
//     "https://d7z22c0gz59ng.cloudfront.net/cms/japan/bnnr/slide/MODELERSSTOREMV_mb.jpg",
//     "https://d7z22c0gz59ng.cloudfront.net/cms/japan/bnnr/slide/56376.jpg",
//     "https://d7z22c0gz59ng.cloudfront.net/cms/japan/bnnr/slide/32606.jpg",
//     "https://d7z22c0gz59ng.cloudfront.net/cms/images/stories/slide/2025/TRY_TAMIYA_RC_school_KTC_20250427_800_360.jpg",
// ]);

// Swiper 模块
const modules = [Navigation, Autoplay];
// 获取 Swiper 实例
const swiperInstance = ref(null);
const onSwiper = (swiper) => {
    swiperInstance.value = swiper;
};

const activeIndex = ref(0);
// 切换到指定幻灯片
const setSlide = (index) => {
    if (swiperInstance.value) {
        swiperInstance.value.slideToLoop(index); // 专门用于 loop 模式的切换方法
        activeIndex.value = index;
    }
};

// 监听幻灯片切换事件
const onSlideChange = () => {
    if (swiperInstance.value) {
        activeIndex.value = swiperInstance.value.realIndex;
    }
};

const props = defineProps({
    isMobile: {
        type: Boolean,
        required: true
    }
});

console.log('SwiperBanner setup with isMobile:', props.isMobile);

const bannerImgList = ref([])
const getData = async () => {
    const params = {
        module: 10001,
    }
    const result = await bannerList(params)
    const list = result.data.map(item => {
        return {
            imgUrl: API_URL + item.img_path.substring(2),
            imgLink: item.img_link
        }
    })
    bannerImgList.value = list;
}

onMounted(() => {
    getData()
});
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const openProductInfoPage = (item) => {
    console.log("openProductInfoPage", item.imgLink)
    if (item.imgLink != null && item.imgLink != "") {
        const id = item.imgLink.match(/[?&]id=(\d+)/)?.[1] || null;
        const fileName = item.imgLink.substring(item.imgLink.lastIndexOf('/') + 1);
        if (fileName.startsWith("showproduct")) {
            router.push({
                name: 'PInfo',
                query: {
                    productId: id
                }
            })
        } else if (fileName.startsWith("shownews")) {
            router.push({
                name: 'NewsDetail',
                query: {
                   advanceId: id
                }
            })
        }


    }

}

</script>

<style scoped lang="scss">
.swiper-container {
    width: 100%;
    height: 550px;
    display: flex;
    flex-direction: column;

    .my-swiper {
        width: 100%;
        height: 550px;

        .slide-wrapper {
            width: 100%;
            height: 550px;
        }
    }
}

/* 图片样式 */
.swiper-slide img {
    cursor: pointer;
    width: 100%;
    height: 550px;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}


/* 选中的幻灯片 */
.swiper-slide-active {
    width: 54% !important;


    img {
        object-position: center;
        object-fit: cover;
    }
}

/* 左右两侧的幻灯片 */
.swiper-slide-prev {
    width: 23% !important;


    img {
        object-position: center;
        object-fit: cover;
    }
}

.swiper-slide-next {
    width: 23% !important;

    img {
        object-position: center;
        object-fit: cover;
    }
}

.swiper {

    :deep(.swiper-button-prev) {
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('~@/assets/images/svg/arrow_right.svg');
        /* 使用 ~@ 引用 */
        width: 50px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        transform: rotate(180deg);
        transform-origin: center;
    }

    :deep(.swiper-button-prev::after) {
        content: "";

    }

    :deep(.swiper-button-next::after) {
        content: "";
    }

    :deep(.swiper-button-next) {
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('~@/assets/images/svg/arrow_right.svg');
        /* 使用 ~@ 引用 */
        width: 50px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.5);
    }
}




.custom-pagination {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #777777;
    margin: 0 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pagination-bullet.active {
    background-color: #F4BB62;
}

/* 设置产品图片的基本样式 */
.product-image {
    width: 100%;
    overflow: hidden;
    display: inline-block;
    /* 确保容器仅包裹图片大小 */
}

/* 图片在容器内的初始状态 */
.product-image img {
    display: block;
    /* 移除图片下方的空白间隙 */
    transition: transform 0.3s ease;
    /* 添加过渡效果 */
}

/* 当鼠标悬停在图片上时触发的样式 */
.product-image:hover img {
    transform: scale(1.1);
    /* 放大图片 */
}


.carousel-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.custom-arrow {
    /* 箭头颜色 */
    color: #fff;
    /* 白色箭头，与半透明背景对比清晰 */
    /* 半透明背景（rgba最后一位为透明度，0.3表示30%透明） */
    background: rgba(0, 0, 0, 0.3);
    /* 圆角（数值越大越圆，50%为正圆） */
    /* 去除默认边框 */
    border: none;
    border-radius: 4px;
    /* 四个角均为 10px 圆角 */
    /* 箭头大小和位置 */
    width: 48px;
    height: 48px;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* 过渡动画（可选，提升交互体验） */
    transition: all 0.3s ease;
}

/* 左箭头位置 */
.custom-arrow.prev {
    left: 10px;

    .left-arrow {
        width: 24px;
    }
}

/* 右箭头位置 */
.custom-arrow.next {
    right: 10px;

    .right-arrow {
        width: 24px;
        transform: rotate(180deg);
        transform-origin: center;
    }
}


:deep(.n-carousel-dot) {
    /* 未激活指示点颜色 */
    background-color: #999 !important;
    /* 可选：调整大小 */
    width: 8px !important;
    height: 8px !important;
}

:deep(.n-carousel-dot.n-carousel-dot--active) {
    /* 激活指示点颜色 */
    background-color: #1890ff !important;
    /* 示例：蓝色 */
    /* 可选：激活时放大 */
    width: 24px !important;
    border-radius: 4px !important;
    /* 变成长圆形 */
}
</style>